<template>
	<view class="container">
		<!-- 顶部 -->
		<view style="width: 100%;height: 10%;margin-bottom: 32px;" >
			<view>
				<image style="width: 80rpx;height:80rpx;margin-left: 50rpx;position: relative;top:95rpx;"
					class="shrink-0 image_3"
					src="http://101.43.223.224:8765/image/getImageById?id=6756" />
			</view>
			<view class="div2">
				<view class="div2-2"
					style="display: flex; align-items: center; justify-content: center;color: #636363;margin-top: 15rpx;">
					<view style="float: left;">
						<image style="width: 40rpx;height: 40rpx;margin-left: -90rpx;" src="../../../static/哑铃.png" alt="">
						</image>
					</view>
					<view style="float: left; margin-left: 10rpx;letter-spacing: 2px;font-size: 28rpx;">
						<text style="font-weight: bold;">追云健身俱乐部</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="boxx" v-for="(item, index) in actionData" :key="index">
				<view class="boxx-name">
					{{ item.fitnessActionName }}
				</view>
				<view class="boxx-bz">
					{{ item.fitnessActionNotes }}
				</view>
				<view class="boxx-video">
					<video :id="'myVideo' + index"
					style="width: 100%;height: 100%;"
					:src="'http://101.43.223.224:8765/image/getImageById?id=' + item.fitnessActionVideo"
					@error="videoErrorCallback"
					ref="videoPlayer"
					controls
					@play="onPlay(index)"
					@pause="onPause(index)">
					</video>
				</view>
			</view>
		</view>
		<tabbar selected-index=2></tabbar>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				option: {},
				actionData: [],
				// 控制视频播放状态的变量
				isPlaying: false, 
				// 当前视频播放时间
				currentTime: 0, 
				currentIndex:-1,
				// 记录当前正在播放的视频索引
				playingIndex: -1, 
			}
		},
		onLoad(option) {
			this.selectFitnessAction();
		},
		 mounted() {
		   // this.$nextTick(() => {
		   //     setTimeout(() => {
				 //   console.log("aaaaaaa "+JSON.stringify(this.$refs))
		   //       const videoRef = this.$refs['videoPlayer' + this.currentIndex][0];
		   //       if (videoRef) {
		   //         console.log('videoPlayer ref exists:', videoRef);
		   //       }
		   //     }, 1000); // 延迟执行获取视频元素的逻辑，您可以适当调整延迟时间
		   //   });
		  },
		methods: {
			// 健身动作查询
			selectFitnessAction(){
				var ths=this
				uni.request({
					url: this.URL+'plan/getFitnessActionall',
					method: 'GET',
					data:{},
					success: function(res) {
						if(res.data.code===200){
							ths.actionData = res.data.data.data
						}
					},
					fail: function(error) {
						// 处理请求失败
						console.error('查询失败,请检查网络');
					}
				})
			},
			videoErrorCallback(e){
			},
			// playVideo(event) {
			//   const video = document.getElementById('myVideo' + index);
			//   if (this.isPlaying && this.currentIndex !== video.id) {
			//         const currentVideo = document.getElementById(this.currentIndex);
			//         if (currentVideo) {
			//           currentVideo.pause(); // 暂停当前正在播放的视频
			//           this.isPlaying = false;
			//         }
			//       }
			  
			//       if (video) {
			//         if (this.isPlaying && this.currentIndex === video.id) {
			//           video.pause();
			//           this.isPlaying = false;
			//         } else {
			//           this.isPlaying = true;
			//           this.currentIndex = video.id;
			//           video.play();
			//         }
			//       }
			// },
			onPlay(index) {
				// if (this.playingIndex !== -1 && this.playingIndex !== index) {
				// 	const prevVideo = this.$refs['myVideo' + this.playingIndex][0];
				// 	prevVideo.pause();
				// }
				// this.playingIndex = index;
			},
			onPause(index) {
				// if (this.playingIndex === index) {
				// 	this.playingIndex = -1;
				// }
			},
		}
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
		width: 100%;
		height: 100vh;
		/* display: flex; */
		justify-content: center;
		align-items: center;
		background-image: url('http://101.43.223.224:8765/image/getImageById?id=6755');
		background-size: cover;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	/* 顶部样式 */
	.div2-2 {
		background-color: #F5F5F5;
		border-radius: 20px 20px;
		height: 70rpx;
		width: 60%;
		margin: 0 auto;
	}
	.content{
		width: 95%;
		height: 80%;
		overflow: scroll;
		margin: 0 auto;
	}
	.boxx{
		width: 95%;
		height: 55%;
		margin: 0 auto;
	}
	.boxx-name{
		font-size: 40rpx;
	}
	.boxx-bz{
		font-size: 34rpx;
		color: dimgrey;
		margin-left: 1%;
	}
	.boxx-video{
		width: 100%; 
		height:60%;
		margin-top:3%;
	}
</style>